<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<html lang="en">
<head>
    <meta charset="UTF-8">
    <base href="/">
    <script src="/js/wangEditor.js"></script>
    <script src="/js/axios.js/"></script>
    <script src="/js/vue.js"></script>
    <script src="/el/element.js"></script>
    <link rel="stylesheet" type="text/css" href="/css/mystyle.css">
    <link rel="stylesheet" type="text/css" href="/el/element.css"/>
    <title>我的个人中心</title>
</head>
<body>
<div id="app">
    <div class="top" style="width: 100%;margin-bottom: 80px">
        <div th:replace="~{common/head-index::head}"></div>
    </div>
    <div style="display: flex;">
        <div style="width: 15%;">
            <el-row class="tac">
                <el-col>
                    <el-menu default-active="2" class="el-menu-vertical-demo" :router=true unique-opened>
                        <el-submenu index="1">
                            <template slot="title">
                                <i class="el-icon-document"></i>
                                <span>文章管理</span>
                            </template>
                            <el-menu-item>
                                <a @click="findMyBlog()">我的文章 </a>
                            </el-menu-item>
                            <el-menu-item>
                                <a @click="sentBlog()">发布文章 </a>
                            </el-menu-item>
                        </el-submenu>
                        <el-submenu index="2">
                            <template slot="title">
                                <i class="el-icon-chat-dot-round"></i>
                                <span>类型管理</span>
                            </template>
                            <el-menu-item>
                                <a @click="findAllTag()">
                                    所有类型
                                </a>
                            </el-menu-item>
                        </el-submenu>
                        <el-submenu index="3">
                            <template slot="title">
                                <i class="el-icon-chat-dot-round"></i>
                                <span>评论管理</span>
                            </template>
                            <el-menu-item>
                                <a @click="findComment()">
                                    文章评论
                                </a>
                            </el-menu-item>
                        </el-submenu>
                        <el-submenu index="4">
                            <template slot="title">
                                <i class="el-icon-user-solid"></i>
                                <span>点赞管理</span>
                            </template>
                            <el-menu-item @click="findMyLikes()">我的喜欢</el-menu-item>
                        </el-submenu>
                    </el-menu>
                </el-col>
            </el-row>
        </div>

        <div style="width: 75%; height: auto;">
            <div class="bodys" style="width: 75vw;">

                <!--显示评论-->
                <div v-if="showComment">
                    <h4 style="text-align: center">评论管理</h4>
                    <el-table style="width: 100%;" :data="comments" border
                              :header-cell-style="{background:'#eef1f6',color:'#606266',fontSize: '15px'}">
                        <el-table-column label="昵称">
                            <template slot-scope="scope">
                                {{scope.row.users.nickname}}
                            </template>
                        </el-table-column>
                        <el-table-column label="评论文章">
                            <!--//显示文章的标题-->
                            <template slot-scope="scope">
                                <el-link @click=findByConId(0,scope.row.comment.blogid)>
                                    <h4>{{scope.row.title}}</h4>
                                </el-link>
                            </template>
                        </el-table-column>
                        <el-table-column label="评论内容" prop='comment.content'>
                        </el-table-column>
                        <el-table-column label="操作">
                            <template slot-scope="scope">
                                <el-button @click="delComment(scope.row.comment.id)">删除该评论</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>

                <!--显示内容-->
                <div v-if="showContent" class="content">
                    <h4 style="text-align: center">文章列表</h4>
                    <div class="text" v-for="item in blogs">
                        <h4 style="background-color: #bde1f5">
                            <a @click="findByConId(item.blog.contentid,item.blog.id)">
                                标题 ： {{item.blog.title}}
                            </a>
                        </h4>
                        <span style="text-indent: 6em">
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{item.blogContent.content}}
                </span>
                        <el-link @click="findByConId(item.blog.contentid,item.blog.id)">
                            查看全文
                            <i class="el-icon-view el-icon--right"></i>
                        </el-link>
                        <br>
                        <div>
                            <el-tag>阅读次数 ： {{item.blog.reding_num}}</el-tag>
                            <el-tag type="success">点赞数量 ： {{item.blog.likes_num}}</el-tag>
                            <el-tag type="info">
                                <img src="img/time.png" style="width: 18px;
            height: 18px;">发布时间 ： {{item.blog.send_time}}
                            </el-tag>
                        </div>
                        <hr>
                    </div>
                    <!--分页-->
                    <div style="text-align: center">
                        <el-pagination background :page-size="num"
                                       :hide-on-single-page="total <num"
                                       :current-page="start"
                                       @current-change="change" layout="prev, pager, next" :total="total">
                        </el-pagination>
                    </div>
                </div>

                <!--显示所有类型-->
                <div v-if="showTag">
                    <h4 style="text-align: center">类型列表</h4>
                    <div style="display: flex;justify-content: left">
                        <el-button>
                            <el-link @click="goAddType()">添加新的类型</el-link>
                        </el-button>
                    </div>
                    <el-table style="width: 100%;" :data="types" border>
                        <el-table-column label="类型名称" prop="type">
                            <template slot-scope="scope">
                                <el-link @click="findByTypeid(scope.row.typeid)">{{scope.row.type}}</el-link>
                            </template>
                        </el-table-column>
                        <el-table-column label="类型文章数量">
                            <template slot-scope="scope">
                                <el-link @click="findByTypeid(scope.row.typeid)">{{scope.row.num}} 篇</el-link>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>

                <!--显示喜欢列表-->
                <div v-if="showLikes">
                    <h4 style="text-align: center">我的喜欢列表</h4>
                    <div class="text" v-for="item in likesLise">
                        <h4 style="background-color: #66afe9">
                            <a @click="findByConId(item.blog.contentid,item.blog.id)">
                                标题 ： {{item.blog.title}}
                            </a>
                        </h4>
                        <br>
                        <div>
                            <el-tag>阅读次数 ： {{item.blog.reding_num}}</el-tag>
                            <el-tag type="success">点赞数量 ： {{item.blog.likes_num}}</el-tag>
                            <el-tag type="info">
                                <img src="img/time.png" style="width: 18px;
            height: 18px;">发布时间 ： {{item.blog.send_time}}
                            </el-tag>
                        </div>
                        <hr>
                    </div>
                </div>

                <!--显示添加类型列表-->
                <div v-if="showAddTag">
                    <div style="margin-top: 30px;margin-left: 35%">
                        <h3> 添加新的博文类型</h3>
                        <p>
                            <el-input placeholder="请输入类型" style="width:300px" v-model="blogtype.type"></el-input>
                        </p>
                        <el-button @click="addtype" :disabled="blogtype.type==''">添加                        </el-button>
                    </div>
                </div>

                <!--显示 富文本编辑器-->
                <span v-show="showEdit">
                        <p><el-input placeholder="请输入文章标题" v-model="title" clearable/></p>
                        <div id="editor" class="editor">
                            <p>欢迎使用 <b>wangEditor</b> 富文本编辑器</p>
                        </div>
                        <hr>
                        <el-select z-index="10px" v-model="typeid" placeholder="请选择文章类型">
                            <el-option
                                    v-for="item in types"
                                    :key="item.typeid"
                                    :label="item.type"
                                    :value="item.typeid">
                            </el-option>
                        </el-select>
                        <hr>
                        <el-button @click="handleAdd(typeid)">提交</el-button>
                        <hr>
                        <div v-html="content">
                        </div>
                </span>
            </div>
        </div>

    </div>
</div>
</div>
</body>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            isLogin: false,
            start: 1,
            num: 5,
            blogs: [],
            total: null,
            comments: [],
            types: [],
            likesLise: [],
            blogtype: {
                type: ""
            },
            title: "",
            content: "",
            editor: null,
            types: [
                {
                    typeid: "1",
                    type: "默认"
                }
            ],
            typeid: "",
            value: "",
            showContent: true, //默认显示所有文章
            showComment: false,//显示 所有评论
            showTag: false,     //显示 类型
            showLikes: false,   //显示 喜欢列表
            showAddTag: false, //显示添加类型
            showEdit: false,  //显示添加文章  富文本编辑器
        },
        methods: {
            //发表文章
            sentBlog() {
                this.showLikes = false;
                this.showContent = false
                this.showComment = false
                this.showTag = false
                this.showAddTag = false
                this.showEdit = true
            },
            //添加类型
            addtype() {
                let _this = this
                axios.post("/api/user/type/addType", this.blogtype).then(function (resp) {
                    if (resp.data.data == false) {
                        _this.$message({
                            message: '该类型已经存在！！',//提示的信息
                            type: 'error',
                        });
                    } else {
                        _this.$message({
                            message: '添加成功！！',//提示的信息
                            type: 'success',
                            duration: 600,　　//显示时间, 毫秒。设为 0 则不会自动关闭，建议1200
                            onClose: () => {
                                top.location.href = "/api/user/go2FindInfo"
                            }
                        });

                    }
                })
            },
            //添加新的类型
            goAddType() {
                console.log("添加新类型")
                this.showAddTag = true
                this.showLikes = false;
                this.showContent = false
                this.showComment = false
                this.showTag = false
                this.showEdit = false
                this.showTag = false
            },
            //我点赞过的文章列表
            findMyLikes() {
                let _this = this
                this.showLikes = true;
                this.showContent = false
                this.showComment = false
                this.showTag = false
                this.showAddTag = false
                this.showEdit = false
                axios.get("/api/user/likes/findMyLikes").then(function (resp) {
                    _this.likesLise = resp.data.data
                })
            },
            //根据类型 查找博文
            findByTypeid(typeid) {
                console.log(typeid)
                let _this = this
                this.showContent = true
                this.showComment = false
                this.showLikes = false;
                this.showTag = false
                this.showAddTag = false
                this.showEdit = false
                axios.get("/api/user/blog/findBageByTypeid/" + this.start + "/" + this.num + "/" + typeid)
                    .then(function (resp) {
                        _this.total = resp.data.data.total
                        _this.blogs = resp.data.data.blogs
                        var reg = /<[^<>]+>/g   //1、全局匹配g
                        //  2、<>标签中不能包含标签实现过滤HTML标签
                        console.log(_this.blogs)
                        if (_this.blogs !=null){
                            for (let i = 0; i < _this.blogs.length; i++) {
                                var msg = _this.blogs[i].blogContent.content.replace(reg, "")
                                _this.blogs[i].blogContent.content = msg.substring(0, 100) + "...."
                            }
                        }
                    })
            },
            //显示所有的类型
            findAllTag() {
                let _this = this
                this.showContent = false
                this.showComment = false
                this.showLikes = false;
                this.showAddTag = false
                this.showEdit = false
                this.showTag = true
                axios.get("/api/user/type/findAll").then(function (resp) {
                    console.log(resp.data.data)
                    _this.types = resp.data.data
                })
            },
            //删除评论
            delComment(item) {
                let _this = this;
                console.log(item)
                axios.get("/api/user/comment/delCommentById/" + item).then(function (resp) {
                    console.log(resp.data.data.data)
                    _this.comments = resp.data.data.data
                    _this.$message({
                        message: '删除成功！',//提示的信息
                        type: 'success',　　//类型是成功
                    });
                })
            },
            //换页
            change(index) {
                console.log(index)
                this.showComment = false;
                this.showTag = false;
                this.showLikes = false;
                this.showAddTag = false
                this.showEdit = false
                let _this = this
                this.start = index;
                sessionStorage.setItem("start", this.start);
                axios.get("/api/user/blog/findByPageMyBlog/" + this.start + "/ " + this.num).then(function (resp) {
                    console.log(resp.data.data)
                    _this.blogs = resp.data.data.blogs
                    var reg = /<[^<>]+>/g   //1、全局匹配g肯定忘记写  2、<>标签中不能包含标签实现过滤HTML标签
                    for (let i = 0; i < _this.blogs.length; i++) {
                        var msg = _this.blogs[i].blogContent.content.replace(reg, "")
                        _this.blogs[i].blogContent.content = msg.substring(0, 100) + "...."
                    }
                })
            },
            //显示全部文章
            findMyBlog() {
                let _this = this;
                _this.showContent = true;
                _this.showComment = false;
                _this.showTag = false;
                _this.showLikes = false;
                _this.showAddTag = false
                _this.showEdit = false

                axios.get("/api/user/blog/findByPageMyBlog/" + _this.start + "/" + _this.num).then(function (resp) {
                    console.log(resp.data.data)
                    _this.total = resp.data.data.total
                    _this.blogs = resp.data.data.blogs
                    var reg = /<[^<>]+>/g   //1、全局匹配g肯定忘记写  2、<>标签中不能包含标签实现过滤HTML标签
                    for (let i = 0; i < _this.blogs.length; i++) {
                        var msg = _this.blogs[i].blogContent.content.replace(reg, "")
                        _this.blogs[i].blogContent.content = msg.substring(0, 100) + "...."
                    }
                })
            },
            //编辑内容
            updateByConId(conid) {
                console.log(conid)
            },
            //查看对我文章的评论
            findComment() {
                let _this = this
                axios.get("/api/user/comment/findCommentByUid").then(function (resp) {
                    _this.showComment = true;
                    _this.showTag = false;
                    _this.showContent = false;
                    _this.showAddTag = false
                    _this.showLikes = false;
                    _this.showEdit = false
                    _this.comments = resp.data.data
                    console.log(resp.data.data)
                })
            },
            handleAdd (typeid){
                let _this = this
                //富文本中的内容
                var content = this.editor.txt.html();
                //上传对象 + 参数
                var title = this.title
                if (_this.title == "" || _this.typeid =="" ){
                    _this.$message({
                        message: '信息必须填写完成！！',
                        type: 'danger'
                    });
                }else{
                    let blogContent = {
                        id  : null,
                        content : content,
                        head : title
                    }
                    axios.post("/api/user/blog/addContent/" + typeid,blogContent).then(function (resp) {
                        // that.content = resp.data.content;
                        if (resp.data.code ==200){
                            _this.$message({
                                message: '发布文章成功',
                                type: 'success',
                                duration:500,　　//显示时间, 毫秒。设为 0 则不会自动关闭，建议1200
                                onClose:()=>{
                                    location.href="/api/user/go2FindInfo"
                                }
                            });
                        }
                    })
                }
            },
            //查看全文
            findByConId(contentid, blogid) {
                //参数 1 ; contenid 内容id
                //参数 2 : 博客id

                //先根据 blogid 找到 这篇文章
                //就能获取到 contenid
                let _this = this;
                if (contentid == 0) {
                    axios.get("/api/user/blog/findById/" + blogid).then(function (resp) {
                        contentid = resp.data.data.contentid
                        sessionStorage.setItem("id", contentid)
                    })
                }
                sessionStorage.setItem("id", contentid)
                sessionStorage.setItem("blogId", blogid)
                _this.$message({
                    message: '正在跳转，请稍后',//提示的信息
                    type: 'success',　　//类型是成功
                    duration: 500,　　//显示时间, 毫秒。设为 0 则不会自动关闭，建议1200
                    onClose: () => {
                        top.location.href = "/api/public/goFindContent";
                    }
                });
            }
        },
        mounted() {
            let _this = this;
            //初始化的时候就获取到 起始页
            var start = sessionStorage.getItem("start");
            console.log("后台当前页数 ： " + start)
            var _start = parseInt(start)
            // == null 表示 首次访问
            if (start == null) {
                _this.start = 1
            } else {
                _this.start = _start
            }
            axios.get("/api/user/blog/findByPageMyBlog/" + _this.start + "/" + _this.num).then(function (resp) {
                console.log(resp.data.data)
                _this.total = resp.data.data.total
                _this.blogs = resp.data.data.blogs
                var reg = /<[^<>]+>/g   //1、全局匹配g肯定忘记写  2、<>标签中不能包含标签实现过滤HTML标签
                for (let i = 0; i < _this.blogs.length; i++) {
                    var msg = _this.blogs[i].blogContent.content.replace(reg, "")
                    _this.blogs[i].blogContent.content = msg.substring(0, 100) + "...."
                }
            })

            var E = window.wangEditor;
            this.editor = new E(document.getElementById('editor'));
            this.editor.config.uploadImgShowBase64 = true
            // 图片上传格式
            // 隐藏网络图片, 把图片转成 base 64
            this.editor.config.pasteFilterStyle = false
            // 自定义颜色
            this.editor.config.colors = ['#000000', '#eeece0', '#1c487f', '#4d80bf', '#c24f4a', '#8baa4a', '#7b5ba1', '#46acc8', '#f9963b', '#ffffff']
            // 配置字体
            this.editor.config.fontNames = ['宋体', '微软雅黑', 'Arial', 'Tahoma', 'Verdana']
            //创建
            this.editor.create();
            // 富文本内容

            this.editor.txt.html();


        }


    })
</script>
</html>